<template>
  <div class="table">
    <el-table
      :data="data"
      stripe
      style="width: 100%"
      :row-key="data.id"
      @sort-change="sortHandler"
      :scrollbar-always-on="true"
    >
      <slot name="column"></slot>
    </el-table>
  </div>
</template>

<script lang="ts">
import { ref, Ref, watch, onMounted } from "vue";
import { PageHeight } from "../utils/pageHeight";

export default {
  name: "Table",
  props: {
    listData: {
      type: Array,
      default: () => [],
    },
  },
  setup(props, { emit }) {
    let data: Ref<any[]> = ref([]);

    //定义单页数量
    let pageCount: Ref<number> = ref(0);

    // 发出刷新回调
    onMounted(() => {
      const height = window.innerHeight;
      pageCount.value = PageHeight(height);
      emit("reFresh", pageCount.value);
    });

    //监听异步父组件发送数据
    watch(
      () => props.listData,
      (newVal, oldVal) => {
        data.value = newVal;
      },
      {
        deep: true,
      }
    );

    //触发日期排序
    function sortHandler({ order }) {
      emit("sortChange", order);
    }

    return {
      data,
      sortHandler,
    };
  },
};
</script>

<style scoped>
.table {
  margin-top: 10px;
}
</style>